<template>
  <div id="wrapper">
    <div class="hang">
      <div class="e" @click="oBtun(0, '/homePage')">
        <span
          class="iconfont icon-shouye1"
          :class="num == 0 ? 'iconfonttwo' : 'iconfontone'"
        ></span>
        <span :class="num == 0 ? 'two' : 'one'">首页</span>
      </div>
      <div class="e" @click="sendXq()">
        <img src="../../static/images/homePageImg/btn.png" alt />
        <span class="one">发布任务</span>
      </div>
      <div class="e" @click="oBtun(1, '/personal')">
        <span
          class="iconfont icon-gerenzhongxin"
          :class="num == 1 ? 'iconfonttwo' : 'iconfontone'"
        ></span>
        <span :class="num == 1 ? 'two' : 'one'">个人中心</span>
      </div>
    </div>
    <!-- 弹窗 -->
    <div
      class="wal-pop"
      @click="popupStatus = !popupStatus"
      v-if="popupStatus"
      @touchmove.prevent
      @mousewheel.prevent
    >
      <div>
        <div>支付选择</div>
        <div style="color:#4E4E4E;">
          <img :src="imgUrl.list1" alt srcset />
        </div>
        <div>本次发布任务你需要支付{{ task_money }}元的余额。</div>
        <div @click.stop>
          <div @click="changeDocum(1)">免费发布</div>
          <div @click="changeDocum(2)">支付发布</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var preD = function(e) {
  e.preventDefault()
}
export default {
  components: {},
  props: ['nm'],
  data() {
    return {
      imgUrl: {
        list1: require('../../static/images/insert/qianjjj.png')
      },
      num: null,
      popupStatus: false,
      task_money: null
    }
  },
  computed: {},
  watch: {},
  methods: {
    oBtun(index, url) {
      let n = this.num
      n = index
      this.num = n

      this.$router.push({
        path: url
      })
    },
    sendXq() {
      this.popupStatus = !this.popupStatus

      // this.$emit('sendg',true)
      // this.$jump('/releaseTask')
    },
    getTaskMoney() {
      let _this = this
      this.$axios({
        method: 'POST',
        url: 'Flink/money'
      })
        .then(res => {
          if (res.data.code == 200) {
            this.task_money = res.data.data.money
            sessionStorage.task_money = this.task_money
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    changeDocum(df) {
      this.popupStatus = false
      df === 1 ? this.$jump('/mianfeiReace') : this.$jump('/releaseTask')
    }
  },
  created() {
    this.getTaskMoney()
    let zhi = this.nm
    this.num = zhi
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.wal-pop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  & > div {
    margin: 0 auto;
    margin-top: 6.3rem;
    width: 7.826667rem;
    height: 5.88rem;
    background-color: #ffffff;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > div {
      margin-top: 0.55rem;
    }
    & > div:nth-child(1) {
      font-size: 0.44rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #303030;
    }
    & > div:nth-child(2) {
      font-size: 0.44rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #ffd35e;
      & > img {
        width: 0.64rem;
        height: 0.773333rem;
      }
    }
    & > div:nth-child(3) {
      width: 80%;
      text-align: center;
      font-size: 0.413333rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #888888;
    }
    & > div:nth-child(3) {
      font-size: 0.413333rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #888888;
    }
    & > div:nth-child(4) {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      & > div:nth-child(1) {
        width: 2.76rem;
        height: 1rem;
        border-radius: 0.506667rem;
        border: solid 1px #4e4e4e;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 0.44rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #303030;
      }
      & > div:nth-child(2) {
        margin-left: 0.533333rem;
        width: 2.76rem;
        height: 1rem;
        background-color: #4e4e4e;
        border-radius: 0.506667rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 0.44rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #fff;
      }
    }
  }
}

.hang {
  position: fixed;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 1.68rem;
  background-color: #ffffff;
  box-shadow: 0rem 0.01rem 0.27rem 0.05rem rgba(8, 8, 8, 0.34);
  padding: 0 1.09rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;

  .e {
    width: 1.56rem;
    height: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .iconfont {
      font-size: 0.56rem;
    }

    .iconfontone {
      color: #cfcfcf;
    }

    .iconfonttwo {
      color: #000;
    }

    img {
      width: 1.52rem;
      height: 1.52rem;
      margin-top: -66%;
    }

    .two {
      font-family: 'PingFang-SC-Medium';
      font-size: 0.37rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #cfcfcf;
    }

    .one {
      font-family: 'PingFang-SC-Medium';
      font-size: 0.37rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #cfcfcf;
    }
  }
}
</style>
